<template>
  <div id="index">
    <div id="header">
      <x-header slot="header" :left-options="{backText: ''}" style="width:100%;position:absolute;left:0;top:0;z-index:100;" title="登录">
        <a href="./#/racelist" style="font-size:24px" slot="right">
          <i class="fa fa-home fa-fw"></i>
        </a>
      </x-header>
    </div>

    <group style="padding-top:30px">
      
      <x-input :is-type="isTel" v-model="tel" placeholder='手机号码'></x-input>
      <x-input v-model="psword" type="password" placeholder='密码'></x-input>
    </group>

    <group style="position:relative;top:-20px;">
      <div style="padding-left:15px;padding-right:15px;padding-top:20px;">
        <flexbox>

          <flexbox-item>
            <x-button :disabled="islogin" @click.native="login" type='primary'>登录</x-button>
          </flexbox-item>

        </flexbox>

        <flexbox style="margin-top:15px">

          <flexbox-item>
            <x-button @click.native="goLink('login_phone')">手机验证登录</x-button>
          </flexbox-item>


          <flexbox-item>
            <x-button @click.native="wx_login()">微信登录</x-button>
          </flexbox-item>
        </flexbox>

      </div>

      <div style="margin-top:15px;text-align:right;padding-right: 15px;line-height:3">

        <a href="javascript:void(0)" @click="goLink('password_find')">忘记密码</a>
        <a href="javascript:void(0)" @click="goLink('register')">注册</a>
      </div>

    </group>

    <myFooter></myFooter>

  </div>
</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
//let host = "http://jiangtao.v3.ihuipao.com/";
const countTime = 60; //倒数计时60秒
import mixin from '@/common/js/mixin.js'
import myFooter from "@/common/components/myfooter.vue";
import Myheader from "@/common/components/myheader.vue";
import { cookie } from "vux";





import {
  XHeader,
  Flexbox,
  FlexboxItem,
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Confirm,
  TransferDomDirective as TransferDom
} from "vux";
//axios
import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";

import { isTel, setTitle } from "@/common/js/main.js";

export default {
  mixins: [mixin],
  props: ["page", "host"],
  data() {
    return {
      tel: "", //注册手机号码
      psword: "", //密码
      isTel: function(value) {
        return {
          valid: isTel(value),
          msg: "请输入正确的手机号码"
        };
      }
    };
  },
  computed: {
    islogin: function() {
      if (isTel(this.tel) && this.psword != "") {
        return false;
      } else {
        return true;
      }
    }
  },
  beforeCreate() {
    setTitle("登录");
    if (
      cookie.get("_sid") &&
      window.localStorage.getItem("isLogin") == "true"
    ) {
      this.$router.push({ path: "/user" });
    }
  },
  created() {
    //cookie.remove('_sid')
    //alert(cookie.get('_sid'))
    //window.localStorage.removeItem('_sid')
  },
  methods: {
    wx_login() {
      let redirect = `${window.location.origin}${window.location.pathname}`;

      if (!!cookie.get("_sid")) {
        let _sid = cookie.get("_sid");
        //如果能抓取到sid
        window.location.href = `${host}auth/weixin/oauth?sid=${_sid}&redirect=${redirect}`;
      } else {
        function randomString(len) {
          len = len || 32;
          var $chars =
            "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678oOLl9gqVvUuI1"; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
          var maxPos = $chars.length;
          var pwd = "";
          for (var i = 0; i < len; i++) {
            pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
          }
          return pwd;
        }
        let _sid = randomString(40);

        cookie.set("_sid", _sid);
        //alert('跳转前_sid是'+cookie.get('_sid'))
        //console.log(`${host}auth/weixin/oauth?sid=${_sid}&redirect=${redirect}`)
        // this.axios
        //   .get(`${host}auth/weixin/oauth`, {
        //     params: {
        //       sid: _sid
        //     }
        //   })
        //   .then(response => {
        //     if (response.data.code == "200") {
        //       alert(response);
        //     } else {
        //       this.$vux.toast.show({
        //         type: "warn",
        //         text: response.data.msg
        //       });
        //     }
        //   });
        //let a = `http://ihuipao.cn/auth/weixin/oauth?sid=${_sid}`;
        //console.log(_sid)
        //console.log(redirect)
        //alert('_sid是'+cookie.get('_sid'))

        window.location.href = `${
          host}auth/weixin/oauth?sid=${_sid}&redirect=${redirect}`;
      }
    },
    goLink(routerName, raceId) {
      let _this = this;
      _this.$router.push({ path: routerName });
    },
    login() {
      let _this = this;
      cookie.remove("_sid");
      console.log(host);
      this.axios
        .post(
          `${host}user/auth`,
          qs.stringify({
            username: this.tel,
            passwd: this.psword
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            window.localStorage.setItem("isLogin", true);
            cookie.set("_sid", response.data.data._sid);
            this.$vux.toast.show({
              type: "success",
              text: "登录成功",
              onHide() {
                _this.$router.push({ path: "user" });
              }
            });
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    }
  },
  directives: {
    TransferDom
  },
  components: {
    XHeader,
    myFooter,
    Flexbox,
    FlexboxItem,
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Myheader,
    Confirm
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
html,
body {
  height: 100%;
  width: 100%;
}

#index {
  h2 {
    font-size: 30px;
    margin: 30px 0 30px 10px;
    text-align: center;
    
    margin-top: 0;
  }
  // 去除group的margintop
  .top-group {
    width: 100%;
  }
  .index-topf {
    margin-bottom: 100px;
    padding-top: 30px;
    .tips {
      padding: 10px 15px;
    }
  }
  .index-bottom {
    height: 60%;
    // 图标颜色
    .fa {
      color: #3cc51f;
      font-size: 28px;
    }
    .fa-no {
      color: #ddd;
      font-size: 28px;
    }
    .weui-grid__icon {
      margin-bottom: 10px;
      pointer-events: none;
    }
    .weui-grid__label {
      pointer-events: none;
    }
  }
  // 详情页
  .index-tops {
    margin: 30px 0 30px 0;
    margin-top: 0;
    padding-top: 30px;
    .gridbox {
      border-bottom: 1px solid #d9d9d9;
      .weui-grid:after {
        border: none;
      }
    }
    .cancel-button {
      margin-top: 15px;
      display: flex;
    }
    .grid-center {
      display: block;
      text-align: center;
      color: #666;
    }
    .gridbox {
      .weui-grid:before {
        border-right: none;
      }
    }
    // 去除选手信息列表的线
    .weui-loadmore_line .weui-loadmore__tips {
      padding: 0;
    }
  }
}

#index .index-bottom .unactive {
  color: #ddd;
}

#index .index-bottom .unactive1 .weui-grid__label {
  color: #000;
}

#index + div .ad {
  display: block;
}

.vux-x-dialog .vux-x-input input {
  border: 1px solid #ccc;
  width: 110px;
}

#app .footerBanner {
  position: static;
}
</style>






